<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta http-equiv="Content-Language" content="cs" />
        <script type="text/javascript" src="jquery.js"></script>
        <script type="text/javascript" src="db.js"></script>
        <link rel="stylesheet" type="text/css" media="screen" href="style.css" />
        <script type="text/javascript">
            chrome.tabs.executeScript(null,{file:"myscript.js"});
			createDB();
            var db = openDatabase('shop-assister', '1.0', 'Shop Assister', 2 * 1024 * 1024);

            findAll();

            $(".remove").live("click",function(){
                remove(this.name);
                $(".item").remove();
                findAll();
                return true;

                //window.location.reload();
            });

            function findAll(){
                db.transaction(function (tx) {
                    tx.executeSql('SELECT * FROM cart', [], function (tx, results) {
                        var len = results.rows.length, i;
                        for (i = 0; i < len; i++) {
                            var image = "<img src='"+results.rows.item(i).image + "'/>";
                            var descr = "<div class='description'>";
                            descr += "<a href='"+results.rows.item(i).url+"' target='_blank'>Open detail</a>";
							descr += "<br/>" + results.rows.item(i).price;
							descr += "</div>";
                            var remove = "<a href='#' name='"+results.rows.item(i).id+"' class='remove' title='Remove item'>×</a>";
                            $("#list").append("<div class='item'>"+image+descr+remove+"</div>");
                        }
                    });
                });
            }
			


        </script>
    </head>

    <body>

        <div id="list"></div>
    </body>
</html>